<template>
	<view>
		<uvsticky offset-top="0">
			<view class="topbox"> 
				<image src="https://m.aqbwg.cn/sourse/xiaowan/logo.png" mode="scaleToFill" class="logo"></image>
				<view class="searcss">
					<view class="cencss" @click="search">
						<uni-icons type="search" size="16" color="#feb2d3"></uni-icons>
						<text>请输入想要搜索的内容</text>
					</view>
					<view class="rigcss" @click="gocity">
						<uni-icons type="location-filled" size="16" color="#0055ff"></uni-icons>
						<text>{{address}}</text>
					</view>
				</view>
			</view>
		</uvsticky>
		<view class="box">
			<view class="kuis">
				<view class="uisa" v-for="(item,index) in titleList" :key="index" @click="goto(index,item.txt,item.id)">
					<view class="uisja">
						<image v-if="isLoaded" :src="item.pic" mode="scaleToFill" class="img1"/>
						<view v-else class="placeholder"></view>
					</view>
					<view style="font-size: 24rpx;">{{item.txt}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="btcss">
			<image src="/static/sjimg/04.png" mode="scaleToFill" class="btimg"></image>
			<view class="altxt" @click="hotDy">
				<text>全部{{dynum}}部</text>
				<uni-icons type="right" size="13" color="#8b8b8b"></uni-icons>
			</view>
		</view>
		<view class="dzcss">
			<view class="typcss" v-for="(item, index) in hotMovie" :key="item.id">
		        <image :src="item.pic" mode="scaleToFill" class="titimg"></image>
		        <view class="jies">{{item.filmName}}</view>
				<view class="buycss" @click="getUrl(item)"> 购票 </view>
		    </view>
		</view> -->
		<view class="btcss">
			<image src="/static/sjimg/01.png" mode="scaleToFill" class="btimg"></image>
		</view>
		<view class="centbox"> 
			<view class="comcss" v-for="item in fjbusiness" :key="item.id" @click="goBusiness(item)">
				<image src="https://m.aqbwg.cn/sourse/xiaowan/dian.jpg" mode="scaleToFill" class="shopimg" v-if="item.pic_door==''||item.pic_door==null"></image>
				<image :src="imgUrl+item.pic_door" mode="scaleToFill" class="shopimg" v-else></image>
				<view class="xiancss">
					<view class="pnamcss">{{item.name}}</view>
					<view class="dinu">{{item.address}}</view>
					<view class="dicss">
						<uni-tag size="small" :text="`消费享 ${100 - item.discount}% 优惠`" type="orange" :circle="true"></uni-tag>
						<uni-icons type="location" size="12">{{item.juli?item.juli:0}}km</uni-icons>
					</view>
				</view> 
			</view>
		</view>
	</view>
</template>

<script setup> 
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiGetmovie , apiMerlist } from '@/api/upapi.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';
	
	const address = ref('');
	const dynum = ref(0);
	const pages = ref(1);
	const latitude = ref('');
	const longitude = ref('');
	const isLoaded = ref(false);
	const isNext = ref(false);
	const titleList = ref([
		// { pic: 'https://m.aqbwg.cn/sourse/xiaowan/dy.png', txt: '电影影院' , id:0 },
		{ pic: 'https://m.aqbwg.cn/sourse/xiaowan/cs.png', txt: '超市便利' , id: 5 },
		{ pic: 'https://m.aqbwg.cn/sourse/xiaowan/ms.png', txt: '周边美食' , id: 1 },
		// { pic: 'https://m.aqbwg.cn/sourse/xiaowan/qz.png', txt: '亲子乐园' , id: 6 },
		// { pic: 'https://m.aqbwg.cn/sourse/xiaowan/yl.png', txt: '小万有礼' , id:10},
		// { pic: 'https://m.aqbwg.cn/sourse/xiaowan/yc.png', txt: '养车用车' , id: 4 },
		// { pic: 'https://m.aqbwg.cn/sourse/xiaowan/dj.png', txt: '旅游度假' , id:0},
		{ pic: 'https://m.aqbwg.cn/sourse/xiaowan/mr.png', txt: '体检医美' , id: 9 },
		{ pic: 'https://m.aqbwg.cn/sourse/xiaowan/cx.png', txt: '大牌卡券' , id: 7 },
		{ pic: 'https://m.aqbwg.cn/sourse/xiaowan/wstk.png', txt: '万事通卡' , id: 3 }
	]);
	const hotMovie = ref([]);
	const fjbusiness = ref([]);
	const imgUrl = ref('https://m.aqbwg.cn/sourse/merchant/');
	
	const onImageLoad = () => { isLoaded.value = true; };
	// const goto=(e,t,d)=>{
	// 	const mervalue = uni.getStorageSync('xwmemberId');
	// 	if(!mervalue){
	// 		uni.showToast({ title: '请先登录',icon:'none' });
	// 		setTimeout(() => { uni.switchTab({ url:'/pages/index/my' }) }, 1000);
	// 		return;
	// 	}
	// 	if(e==6){
	// 		// uni.navigateTo({ url: '/pagesA/index/index' })
	// 		uni.showToast({ title: '暂未开放',icon:'none' });
	// 	}else if(e!==0&&e!==6){
	// 		if(d==3){
	// 			uni.navigateTo({ url: '/pagesA/index/buyCard' })
	// 		}else if(d==7){
	// 			uni.navigateTo({ url: '/pagesA/business/cards?title='+t })
	// 		}else{
	// 			uni.navigateTo({ url: '/pagesA/business/index?title='+t +'&id='+d })
	// 		}
	// 	}else if(e==0){
	// 		// uni.navigateTo({ url: '/pagesA/movie/index' })
	// 		uni.showToast({ title: '暂未开放',icon:'none' });
	// 	}
	// };
	const search = ()=>{ uni.showToast({ title: '暂未开放',icon:'none' }); };
	const goto=(e,t,d)=>{
		const mervalue = uni.getStorageSync('xwmemberId');
		if(!mervalue){
			uni.showToast({ title: '请先登录',icon:'none' });
			setTimeout(() => { uni.switchTab({ url:'/pages/index/my' }) }, 1000);
			return;
		}
		if(d==3){
			uni.navigateTo({ url: '/pagesA/index/buyCard' })
		}else if(d==7){
			uni.navigateTo({ url: '/pagesA/business/cards?title='+t })
		}else{
			uni.navigateTo({ url: '/pagesA/business/index?title='+t +'&id='+d })
		}
	};
	// 获取附近商家
	const shopData = async () => {
		try {
			let res = await apiMerlist({
				lng: longitude.value,
				lat: latitude.value,
				clint: 'ali',
				page: pages.value,
				pageSize: 10,
				type: 0
			});
			var data = res.data.object;
			if(res.data.result==0){
				if (pages.value == 1) {
					fjbusiness.value = data
				} else {
					fjbusiness.value = fjbusiness.value.concat(data);
				}
				if (data.length >= 10) {
					pages.value = pages.value + 1;
				} else {
					isNext.value = true
				}
			}else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const goBusiness=(e)=>{ uni.navigateTo({ url: '/pagesA/business/business?id='+e.id }) };
	const gocity=()=>{ 
		// uni.navigateTo({ url: '/pagesA/movie/citylist' })
		uni.showToast({ title: '暂未开放',icon:'none' });
	};
	
	// 获取热门影片
	const getMovie = async() => {
		try {
			let res = await apiGetmovie({
				page: 1,
				pageSize:10
			});
			if(res.data.result==0){
				hotMovie.value=res.data.object.data;
				dynum.value=res.data.object.count
			}else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getUrl =(e)=>{ uni.navigateTo({ url: '/pagesA/movie/cinema?title='+e.filmName+'&id='+e.filmId }) };
	const hotDy=()=>{ uni.navigateTo({ url: '/pagesA/movie/movie' }) };
	const getLocadin = () => {
	    my.getLocation({
	            async success(res) {
					console.log('rrrr===',res);
	                const lat = res.latitude;
	                const lng = res.longitude;
	                latitude.value = lat;
	                longitude.value = lng;
	                // 假设 shopData 是一个已定义的函数
	                shopData(); 
	                const apiKey = '1bd6e5d542cb6f37c42cd01845314009';
	                const url = `https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${lng},${lat}`;
	                try {
	                    const { data } = await uni.request({ url });
	                    if (data.status === '1') {
	                        const addressData = data.regeocode.addressComponent;
	                        address.value = addressData.city;
	                        uni.setStorageSync('cityName', addressData.city);
	                        const cityIds = (addressData.adcode).substring(0, 4) + '00';
	                        uni.setStorageSync('cityIds', cityIds);
	                    } else {
	                        console.log('逆地理编码失败');
	                    }
	                } catch (error) {
	                    console.log('请求失败:', error);
	                }
	            },
	            fail(error) {
	                console.log('获取位置失败:', error);
	            }
	        });
	};
	
	onLoad(() => {
		getLocadin();
		getMovie();
	});
	onShow(() => {
		const citysn=uni.getStorageSync('cityName')
		if(citysn){
			address.value=citysn;
		}
		onImageLoad();
		pages.value = 1;
		fjbusiness.value=[];
		if(latitude.value){
			shopData();
		}
	});
	onReachBottom(() => {
		if (!isNext.value) {
		    shopData();
		}
	});
</script>
<style>
	page{background-color: #fff;}
</style>
<style scoped lang="scss">
	.topbox{
		padding: 88rpx 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		background: linear-gradient(30deg, #ffeaf0 5%, #fee3ea 40%,  #fde2e9 80%,  #ffeaf0 100%);
		
		.logo{
			width: 255rpx;
			height: 57.2rpx;
			margin-bottom: 20rpx;
		}
		.searcss{
			padding: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 30rpx 6rpx;
			border: 2rpx solid #feb2d3;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cencss{
				font-size: 26rpx;
				color: #feb2d3;
				width: 77%;
				border-right: 2rpx solid #c6c6c6;
				display: flex;
				align-items: center;
				>text{
					margin-left: 10rpx;
				}
			}
			.rigcss{
				font-size: 26rpx;
				display: flex;
				align-items: center;
				>text{
					margin-left: 10rpx;
				}
			}
		}
	}
	.box{
		padding: 20rpx 30rpx;
		background: linear-gradient(to bottom, #ffeaf0 5%, #fff 100%);
	}
	
	.btcss{
		padding:20rpx 30rpx 10rpx;
		background-color: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		
		.btimg{
			width: 140rpx;
			height: 46rpx;
		}
		.altxt{
			font-size: 26rpx;
			color: #8b8b8b;
		}
	}
	.dzcss {
	    background-color: #fff;
	    border-radius: 30rpx 30rpx 0 0;
		padding: 10rpx 0rpx 30rpx;
		margin: 0 30rpx;
	    position: relative;
		display: flex;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: scroll;
		
		.typcss {
		    display: flex;
		    flex-direction: column;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		.typcss:last-child{
			margin-right: 0rpx;
		}
		.jies{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 24rpx;
			margin: 6rpx 0;
			width: 140rpx;
		}
		.buycss{
			background: linear-gradient(207deg,#ff9db3 0%, #ff4a82 100%);
			padding: 4rpx 20rpx;
			border-radius: 50rpx;
			font-size: 24rpx;
			color: #fff;
			width: 2em;
		}
		
		.titimg {
		    width: 140rpx;
		    height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	.centbox{
		padding:10rpx 30rpx 30rpx;
		.comcss{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.shopimg{
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}
			.xiancss{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				overflow: hidden;
				height: 200rpx;
				.pnamcss{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-weight: 600;
				}
				.dicss{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.dinu{
					font-size: 24rpx;
					color: #787878;
					display: -webkit-box; /* 使用弹性盒子布局 */
					-webkit-box-orient: vertical; /* 垂直排列 */
					-webkit-line-clamp: 2; /* 限制为两行 */
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 超出部分显示省略号 */
				}
			}
		}
	}
	.kuis {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0 0;
		overflow: hidden;
	
		.uisa {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;
	
			.uisja {
				margin-bottom: 10rpx;
			}
	
			.img1 {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.placeholder {
		width: 80rpx;
		height: 80rpx;
		  background-color: #f0f0f0;
		}
	}
</style>